<template>
  <div class="right_tree">
    <div class="toprow">
      <!-- 设备平均信息 -->
      <!-- <Rtopone /> -->
      <!--  -->
     <!-- <Rtoptwo/> -->
<div>
    <Titlehead uname="使用率排行统计" />
    <dv-scroll-board :config="config" style="width:450px;height:350px" />
    <div class="other_">
    <Titlehead uname="设备数量排行统计" />
    <dv-scroll-board :config="config1" style="width:450px;height:400px" />
<!-- <Dialoginfo ref="dialoginfo"/> -->
</div>
</div>
    </div>
  </div>
</template>

<script>
// import Rtopone from "./rightbox/rTop1";
// import Rtoptwo from "./rightbox/rtop2";
import Titlehead from "./firstTitle";
// import { listelc } from "@/api/system/screen";
// import Dialoginfo from "../headpaifond/diloge"
export default {
    data() {
    return {
        config: {
            header: [ '名称', '使用率'],
        data: [ 
        [  '埠头小区站', '20%'],
        [  '安岭乡小区站', '15%'],
        [  '广度乡小区站', '45%'],
        [ '白塔镇小区站', '35%'],
        [ '朱溪镇小区站', '15%'],
        [ '湫山乡小区站', '65%'],
        [ '皤滩乡小区站', '65%'],
        [ '埠头镇小区站', '65%'],
        [ '上张乡小区站', '75%'],
        [ '南峰街道小区站', '65%'],
        [ '埠头镇小区站', '65%'],
        [ '湫山乡小区站', '25%'],
        [ '福应街道小区站', '35%'],
        [ '双庙乡小区站', '35%'],
        [ '朱溪镇小区站', '35%'],
        [ '湫山乡小区站', '25%'],
        [ '皤滩乡小区站', '35%'],
        [ '埠头镇小区站', '55%'],
        [ '上张乡小区站', '35%'],
        [ '南峰街道', '35%'],
        [ '埠头镇小区站', '55%'],
        [ '湫山乡小区站', '45%'],
        [ '福应街道小区站', '25%'],
        [ '双庙乡小区站', '35%'],
        ],
        rowNum: 7, //表格行数
        headerHeight: 35,
        headerBGC: "#0e1b2b", //表头
        oddRowBGC: "", //奇数行
        evenRowBGC: "#3d8ecd4f", //偶数行
        index: true,
        waitTime:1000,
        // columnWidth: [800],
        align: ["center"],
      },
      config1: {
            header: [  '运营商名称', '数量'],
        data: [ 
        [  '埠头小区站', '22550'],
        [  '安岭乡小区站', '15561'],
        [  '广度乡小区站', '45561'],
        [ '白塔镇小区站', '3521'],
        [ '朱溪镇小区站', '15300'],
        [ '湫山乡小区站', '65300'],
        [ '皤滩乡小区站', '165300'],
        [ '埠头镇小区站', '65300'],
        [ '上张乡小区站', '7522'],
        [ '南峰街道小区站', '6512'],
        [ '埠头镇小区站', '6521'],
        [ '湫山乡小区站', '2533'],
        [ '福应街道小区站', '1235'],
        [ '双庙乡小区站', '351'],
        [ '朱溪镇小区站', '35%'],
        [ '湫山乡小区站', '2512'],
        [ '皤滩乡小区站', '3521'],
        [ '埠头镇小区站', '5500'],
        [ '上张乡小区站', '3543'],
        [ '南峰街道', '3534'],
        [ '埠头镇小区站', '5500'],
        [ '湫山乡小区站', '4544'],
        [ '福应街道小区站', '252'],
        [ '双庙乡小区站', '351'],
        ],
        rowNum: 7, //表格行数
        headerHeight: 35,
        headerBGC: "#0e1b2b", //表头
        oddRowBGC: "", //奇数行
        evenRowBGC: "#3d8ecd4f", //偶数行
        index: true,
        waitTime:1000,
        // columnWidth: [800],
        align: ["center"],
      },
    };
  },
  components: {
    // Rtopone, 
    // Rtoptwo,
    Titlehead,
    // Dialoginfo
  },
  created() {
    // this.getpagedate()
  },

  methods: {
    pagebox(config){
      console.log(config)
      this.$refs.dialoginfo.showidbos(config.row[0])
    },  
    formatTime(timestamp) {
      const duration = this.$moment.duration(timestamp, "seconds");
      const hours = Math.floor(duration.asHours());
      const minutes = Math.floor(duration.minutes());
      const remainingSeconds = duration.seconds();
      return `${hours} 小时 ${minutes} 分钟${remainingSeconds} 秒`;
    },
    getpagedate(){
        // let that=this
        // let changes=[]
        // listelc({
        //     pageNum: 1,
        // pageSize:50,
        // gisIsOnline: "2",
        // isOnline:'0'
        // }).then(res=>{ 
        //     res.rows.map(item=>{
        //         changes.push([
        //             item.elcId,
        //             item.elcName,
        //            that.formatTime(item.elcOnlineTime) 
        //         ])
        //     }) 
           
        //     that.config={
        //   ...this.config,
        //   data:changes
        // }
        // })
    }
  },
}
</script>
<style lang="scss" scoped>

@import url("./font.scss");

.right_tree {
  padding:   25px;
}

::v-deep .row-item{
cursor: pointer;
}
.other_{
  margin-top: 30px;
}
</style>